<template>
    <el-dialog :model-value="show" title="分配角色" @close="emit('hide')">
    <el-form :model="form"  ref="formRef" :rules="rules">
      <el-form-item label="角色名称" prop="name">
        <el-input v-model="form.name" autocomplete="off" />
      </el-form-item>
      <el-form-item label="描述">
        <el-input 
        v-model="form.description"
        autocomplete="off"
        :rows="4"
        type="textarea" />
      </el-form-item>
      <el-form-item label="是否启用">
      <el-radio-group v-model="form.status" class="ml-4">
      <el-radio :label="1">是</el-radio>
      <el-radio :label="0">否</el-radio>
    </el-radio-group>
  </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="CancelFn">取消</el-button>
        <el-button type="primary" @click="addFn">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script setup lang='ts'>
import {reactive,ref, watch} from 'vue'
import { ElMessage, ElMessageBox, FormInstance } from 'element-plus'
import {addRoleAPI, editRoleAPI, getUserRoleAPI} from './api'
const props=defineProps({
    show:{
        type:Boolean,
        default:false
    } ,
    id:{
      type:Number,
      default:0
    },
    name:{
      type:String,
      default:''
    },
    description:{
      type:String,
      default:''
    }
})


const form=reactive<IRoleModel>({
  name: '',
  description: '',
  status: 0,
  id:0
})
const rules={
  name:[{required:true,trigger:'blur',message:'请输入角色名字'}]
}
const formRef = ref<FormInstance>();
const emit =defineEmits(['hide','ShutDown']);

watch(
()=>props.id,
()=>{
if(props.id!==0){
//   console.log('这是watch里面的props.name',props.name);
//   console.log('这是watch里面的props.description',props.description);
  form.id=props.id
  form.name=props.name;
  form.description=props.description
}else{
  form.id=0
  form.name=''
  form.description=''
}
})

const addFn=()=>{
  formRef.value?.validate((ok:boolean)=>{
    if(ok){
      ElMessageBox.confirm('此操作将添加角色信息, 是否继续?','提示',{
  confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
}).then(()=>{
  if(props.id !==0){

    editRoleAPI(form).then(res=>{
      if(res.code===200){
        ElMessage.success('修改成功');
      formRef.value?.resetFields();
      form.description=''
      emit('hide');
      }
    })
  }else{
    addRoleAPI(form).then(res=>{
    if(res.code===200){
      ElMessage.success('添加成功');
      formRef.value?.resetFields();
      form.description=''
      emit('hide');
    }
  })
  }

}).catch(()=>{
  formRef.value?.resetFields();
})
    }else{
      ElMessage.warning("请输入角色名字")
    }
  })
  
}
const CancelFn=()=>{
      formRef.value?.resetFields()
      emit('hide')
}
</script>
<style lang="less" scoped>
</style>